<template>
  <div>
    <template>
      <div>
        <el-form ref="form" :model="car" label-width="80px" style="padding-top: 20px;padding-left: 200px">
          <el-form-item>
            车牌：<el-input v-model="car.licenseNumber" style="width: 300px; padding-right: 50px"></el-input>
            车主名称：<el-input v-model="car.populationName" style="width: 300px; padding-right: 50px"></el-input>
            车主证件号：<el-input v-model="car.populationIdNumber" style="width: 300px; padding-right: 50px"></el-input>
            <el-input v-model="car.keyword" style="width: 300px; padding-right: 50px" placeholder="请输入栋/单元号/房间号" ></el-input>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button @click="cancel">取消</el-button>
            <el-button @click="add">新增车辆</el-button>
          </el-form-item>
        </el-form>
        <div style="display: flex; flex-wrap: wrap;">
          <div v-for="item in arr" style="margin-top: 20px;padding-left: 100px">
            <el-card style="display: flex; align-items: flex-start; max-width: 300px;">
              <div style="display: flex; align-items: center;">
                <div style="margin-right: 20px;">
                  <img :src="item.pic" alt="" style="width: 100px; height: 100px;">
                </div>
                <div>
                  <p class="text item">车牌号: {{ item.licenseNumber }}</p>
                  <span>车主：{{ item.populationName }}</span>
                  <p class="text item">小区名称: {{ item.plotName }}</p>
                  <p class="text item">楼栋名称: {{ item.buildingName }}</p>
                  <p class="text item">单元名称: {{ item.apartmentName }}</p>
                  <p class="text item">房间名称: {{ item.roomName }}</p>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </template>
    <el-table :data="arr" style="width: 95%;padding-left: 100px;padding-top: 20px">
      <el-table-column label="图片" width="250">
        <template slot-scope="scope">
          <img :src="scope.row.pic" alt="图片损坏">
        </template>
      </el-table-column>
      <el-table-column label="车牌" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.licenseNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车主" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.populationName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="小区" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.plotName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="栋楼" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.buildingName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单元" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.apartmentName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="房间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.roomName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="证件号码" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.populationIdNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.car.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="this.car.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.car.total">
    </el-pagination>


    <el-dialog :title=this.title :visible.sync="dialogFormVisible">
      <el-form :model="cars">
        <el-form-item label="车牌" :label-width="formLabelWidth">
          <el-input v-model="cars.licenseNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="车主" :label-width="formLabelWidth">
          <el-select v-model="cars.populationId" placeholder="请选择车主">
            <el-option v-for="item in population" :label="item.name" :value="item.id" :key="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车辆图片" :label-width="formLabelWidth">
          <el-upload
            action="/prod-api/base-sixreal/population/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <img :src="cars.pic" alt="">
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCar">确 定</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {list, add, update, del} from "@/api/community/car";
import { findAll } from "@/api/community/population";

export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        arr:[],
        car:{
          pageNum:1,
          pageSize:5,
          total:1
        },
        cars:{},
        vehicle:[],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        bb:1,
        population:[],
        dialogImageUrl: '',
        dialogVisible: false,
        title:'新增车辆信息'
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      handleDelete(car){
        del(car.id).then(
          res => {
            this.$message.success(res.msg)
            this.list()
          }
        )
      },
      addCar(){
        if(this.bb==1){
          console.log(this.cars)
          add(this.cars).then(
            res => {
              this.$message.success(res.msg)
              this.dialogFormVisible=false
              this.cars={}
            }
          )
        }
        if(this.bb==2){
          update(this.cars).then(
            res => {
              this.$message.success(res.msg)
              this.dialogFormVisible=false
              this.cars={}
            }
          )
        }
      },
      handleSuccess(response,file,fileList){
        console.log(response)
        this.cars.pic=response.data
        console.log(this.cars)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleEdit(car){
        this.title='修改车辆信息'
        this.cars=car
        this.bb=2
        this.dialogFormVisible=true
      },
      findAll(){
        findAll().then(
          res => {
            console.log(res)
            this.population=res.data
          }
        )
      },
      add(){
        this.cars={}
        this.dialogFormVisible=true
      },
      cancel(){
        this.car={
          pageNum:1,
          pageSize:5,
          total:1
        }
        this.list()
      },
      onSubmit(){
        this.list()
      },
      handleSizeChange(val) {
        this.car.pageSize=val
        this.list()
      },
      handleCurrentChange(val) {
        this.car.pageNum=val
        this.list()
      },
      list(){
        list(this.car).then(
          res => {
            this.car.total=res.data.total
            this.arr=res.data.list
          }
        )
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
      this.list()
      this.findAll()
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
